<template>
  <div class="container">
    <div class="mapContainer" id="mapContainer"></div>
    <!-- <div class="center-area">
      <mapIndex :cureentMenu="cureentMenu"></mapIndex>
    </div> -->
    <mapTip
      v-if="cureentMenu != 1"
      class="map-tips"
      :cureentMenu="cureentMenu"
    ></mapTip>
    <div class="mask"></div>
    <!-- 抬头 -->
    <headerTop
      class="top-area"
      :cureentMenu="cureentMenu"
      :headerText="headerText"
      @changeMenu="changeMenu"
    ></headerTop>
    <!-- 自建房外嵌页面 -->
    <sbhSupervise v-if="showSbhIframe"></sbhSupervise>
    <!-- 首页 -->
    <div v-if="menuList[0].isShow">
      <homeLeft
        class="left-area"
        @openElecPopup="openElecPop"
        @openUserPop="openUserPop"
      ></homeLeft>
      <homeRight class="right-area"></homeRight>
      <homeBottom class="bottom-area"></homeBottom>
    </div>
    <!-- 智慧用电安全 -->
    <div v-if="menuList[2].isShow">
      <elecSafetyLeft
        class="left-area"
        @openElecPopup="openElecPop"
        @openMoreUser="openMoreUser"
        ref="elecSafetyLeftRef"
      ></elecSafetyLeft>
      <elecSafetyRight class="right-area"></elecSafetyRight>
      <elecSafetyBottom class="bottom-area"></elecSafetyBottom>
    </div>
    <!-- 综合数据库 -->
    <div v-if="menuList[3].isShow">
      <databaseLeft
        class="left-area"
        @openElecPopup="openElecPop"
        @openBroadCast="openBroadCast"
        ref="dataBaseLeftRef"
      ></databaseLeft>
      <databaseRight class="right-area"></databaseRight>
      <databaseBottom class="bottom-area"></databaseBottom>
    </div>
    <!-- 地图标注信息弹窗 -->
    <pointDeatil ref="pointPopRef"></pointDeatil>
    <!-- 电力预警详情弹窗 -->
    <elecDetail
      ref="elecDetailRef"
      @closeElecPopup="closeElecPopup"
    ></elecDetail>
    <!-- 用户详情弹窗 -->
    <userDetail ref="userDetailRef"></userDetail>
    <!-- 风险管理措施 -->
    <riskManMeasures ref="riskManMeasuresRef"></riskManMeasures>
    <!-- 智慧用电安全更多用户 -->
    <moreUser ref="moreUserRef" @openElecPopup="openElecPop"></moreUser>
    <!-- 社区播报全揽弹窗 -->
    <comBroadcast ref="comBroadcastRef"></comBroadcast>
  </div>
</template>

<script>
import headerTop from "@/components/headerTop/headerTop.vue";
import homeLeft from "@/components/home/leftArea.vue";
import homeRight from "@/components/home/rightArea.vue";
import homeBottom from "@/components/home/bottomArea.vue";
import elecSafetyLeft from "@/components/elecSafety/leftArea.vue";
import elecSafetyRight from "@/components/elecSafety/rightArea.vue";
import elecSafetyBottom from "@/components/elecSafety/bottomArea.vue";
import databaseLeft from "@/components/database/leftArea.vue";
import databaseRight from "@/components/database/rightArea.vue";
import databaseBottom from "@/components/database/bottomArea.vue";
import mapTip from "@/components/mapTip/mapTip.vue";
import sbhSupervise from "@/components/sbhSupervise/sbhSupervise.vue";
import pointDeatil from "@/components/pointDeatil/pointDeatil.vue";
import elecDetail from "@/components/elecDetail/elecDetail.vue";
import userDetail from "@/components/userDetail/userDetail.vue";
import riskManMeasures from "@/components/riskManMeasures/riskManMeasures.vue";
import moreUser from "@/components/moreUser/moreUser.vue";
import comBroadcast from "@/components/comBroadcast/comBroadcast.vue";
// import mapIndex from "@/components/mapIndex/mapIndex.vue";
// // import mapInfoPopup from "@/components/mapInfoPopup/mapInfoPopup.vue";
import { mixins } from "@/utils/mapMixin.js";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "index",
  components: {
    headerTop,
    homeLeft,
    homeRight,
    homeBottom,
    elecSafetyLeft,
    elecSafetyRight,
    elecSafetyBottom,
    databaseLeft,
    databaseRight,
    databaseBottom,
    mapTip,
    sbhSupervise,
    pointDeatil,
    elecDetail,
    userDetail,
    riskManMeasures,
    moreUser,
    comBroadcast,
    // mapIndex,
    // mapInfoPopup,
  },
  mixins: [mixins],
  data() {
    return {
      cureentMenu: 0,
      headerText: "汉丰街道智慧应用场景", //汉丰街道智能用电AI防控系统
      menuList: [
        {
          id: 1,
          title: "首页",
          isShow: true,
        },
        {
          id: 2,
          title: "自建房智能监管",
          isShow: false,
        },
        {
          id: 3,
          title: "智慧用电安全",
          isShow: false,
        },
        {
          id: 4,
          title: "综合数据库",
          isShow: false,
        },
      ],
      showSbhIframe: false, //自建房外嵌页面
    };
  },
  mounted() {},
  methods: {
    // 菜单切换s
    changeMenu(index) {
      this.cureentMenu = index;
      if (index != 4) {
        if (index == 0) {
          this.headerText = "汉丰街道智慧应用场景";
          this.showSbhIframe = false;
        }
        if (index == 1) {
          this.headerText = "自建房智慧监管应用场景";
          this.showSbhIframe = true;
        }
        if (index == 2) {
          this.headerText = "智能用电AI防控应用场景";
          this.showSbhIframe = false;
        }
        if (index == 3) {
          this.headerText = "综合数据组件";
          this.showSbhIframe = false;
        }
        this.menuList = this.menuList.map((item, index) => {
          if (index == this.cureentMenu) {
            item.isShow = true;
          } else {
            item.isShow = false;
          }
          return item;
        });
      } else {
        this.$refs.riskManMeasuresRef.showRmmPop = true;
      }
      this.changeMarker(index);
    },
    // 打开自建房标注弹窗
    openPoint(id, marker) {
      this.$refs.pointPopRef.showPop = true;
      this.$refs.pointPopRef.getPointDetailInfo(id, marker);
    },
    // 打开用户详情弹窗
    openUserPop() {
      this.$refs.userDetailRef.showPop = true;
      this.$refs.userDetailRef.initTable();
    },
    // 打开电力预警详情弹窗
    openElecPop(row, type) {
      this.$refs.elecDetailRef.showPop = true;
      this.$refs.elecDetailRef.getElecInfo(row, type);
    },
    closeElecPopup(type) {
      // 智慧用电滚动表格
      if (this.$refs.elecSafetyLeftRef) {
        if (type == "userinfo") {
          this.$refs.elecSafetyLeftRef.isShowPop1 = false;
          this.$refs.elecSafetyLeftRef.autoScroll("userinfo", false);
        }
        if (type == "elec") {
          this.$refs.elecSafetyLeftRef.isShowPop2 = false;
          this.$refs.elecSafetyLeftRef.autoScroll("alarminfo", false);
        }
      }
      // 综合数据库滚动表格
      if (this.$refs.dataBaseLeftRef) {
        this.$refs.dataBaseLeftRef.isShowPop = false;
        this.$refs.dataBaseLeftRef.autoScroll(false);
      }
    },
    // 更多用户信息弹窗
    openMoreUser() {
      this.$refs.moreUserRef.showPop = true;
      this.$refs.moreUserRef.initTable();
    },
    // 社区播报浏览全部信息弹窗
    openBroadCast() {
      this.$refs.comBroadcastRef.showPop = true;
    }
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // background: url("@/assets/image/bg.png") no-repeat;
  // background-size: 100% 100%;

  .mapContainer {
    width: 100%;
    height: 100%;
  }

  .bm-view {
    width: 100%;
    height: 100%;
    position: relative;
    .tips-control {
      width: 7vw;
      border-radius: 3px;
      background: #0b214a;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-right: 21.3vw;
      margin-bottom: 1.6vh;
      padding: 0.2vw 1vh;
      z-index: 10;
      box-sizing: border-box;

      .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.16rem;
        line-height: 2vh;
        cursor: pointer;
        > div {
          width: 12%;
          height: 4vh;
          margin-right: 0.6vw;
          margin-bottom: 0.5vh;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        > div:first-child {
          margin-top: 1vh;
        }
        > div:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
  // 清除 标识
  ::v-deep .BMap_cpyCtrl {
    display: none !important;
  }
  ::v-deep .anchorBL {
    display: none !important;
  }
}

.mask {
  width: 100%;
  height: 100%;
  // background: radial-gradient(
  //   50% 50% at 50% 50%,
  //   rgba(0, 0, 0, 0) 0%,
  //   rgba(0, 0, 0, 0.72) 100%
  // );
  background: radial-gradient(
    53.22% 53.22% at 50% 46.78%,
    rgba(0, 0, 0, 0) 23.5%,
    #000 100%
  );
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.left-area {
  position: absolute;
  top: 10.5vh;
  left: 0.8%;
  width: 20vw;
  height: calc(100vh - 12.1vh);
  z-index: 10;
  // border: 1px solid red;
}

.right-area {
  position: absolute;
  top: 10.5vh;
  right: 0.8%;
  width: 20vw;
  height: calc(100vh - 12.1vh);
  z-index: 10;
  // border: 1px solid red;
}

.top-area {
  width: 100%;
  height: 10vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  // border: 1px solid red;
}

.center-area {
  position: absolute;
  width: calc(97.2% - 40vw);
  height: calc(100vh - 20vh - 4.5vh - 10vh - 3.2vh);
  left: calc(20vw + 1.4%);
  top: 10.5vh;
  // border: 1px solid red;
}

.bottom-area {
  width: calc(97.2% - 40vw);
  height: calc(20vh + 4.5vh);
  position: absolute;
  left: calc(20vw + 1.3%);
  bottom: calc(100vh - calc(100vh - 12.1vh) - 10.5vh);
  margin: 0 auto;
  z-index: 10;
  // border: 1px solid red;
}

.map-tips {
  position: absolute;
  right: calc(20vw + 2%);
  bottom: calc(100vh - calc(100vh - 12.1vh) - 10.5vh + calc(20vh + 4.5vh));
  z-index: 100;
}
</style>
